<!-- 这是占一整行的Navbar -->

<script setup>
import { ref, onMounted, inject, computed, onUnmounted } from "vue";
// import { getAvatar } from "@/api/userinfo";
// 有标签高亮需求就引入
import Avatar from "@/components/Avatar.vue";
// 引入面包屑导航
import ElBreadcrumb from "@/components/Breadcrumb/index.vue";

// 响应式时间变量
const currentDate = ref("");

// 声明 "modelValue" prop，由父组件通过 v-model 使用
const isCollapse = defineModel();

const props = defineProps({
  iconText: {
    type: Boolean,
    default: "true",
  },
  routeShow: {
    type: Boolean,
    default: "false",
  },
  routeParam: {
    type: String,
    default: "index",
  },
  // props
});
// 注入对象
const user = inject("userInfo");

const emit = defineEmits(["dropdownCommand"]);
// 下拉菜单方法
const handleCommand = (command) => {
  emit("dropdownCommand", command);
};

// 格式化函数
const formatDate = () => {
  const date = new Date();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const weekDay = weekDays[date.getDay()];
  return `${month}/${day} ${weekDay}`;
};
// 更新时间的方法
const updateTime = () => {
  currentDate.value = formatDate();
};
// 定时器变量
let timer = null;

// 组件挂载时启动定时器
onMounted(() => {
  updateTime(); // 初次加载
  timer = setInterval(updateTime, 60 * 1000); // 每分钟更新一次
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<template>
  <div class="top" style="border-bottom: 1px solid #e6e6e6">
    <el-row :gutter="20">
      <el-col :sm="12" :lg="12" :xs="12" :md="12" class="left">
        <div class="left-common" :gutter="5" v-show="iconText">
          <img src="@/assets/pan.png" alt="Logo" class="logo" />

          <!-- <p class="title-2">XX网盘</p> -->
          <p class="title-2">myshare</p>
        </div>
        <div class="left-common" :gutter="5" v-show="routeShow">
          <div @click="isCollapse = !isCollapse" class="animated heartBeat">
            <el-icon v-if="!isCollapse"><ArrowLeftBold /></el-icon>
            <el-icon v-else><ArrowRightBold /></el-icon>
          </div>

          <ElBreadcrumb></ElBreadcrumb>
        </div>
      </el-col>
      <el-col :sm="12" :lg="12" :xs="12" :md="12"
        ><el-row
          :gutter="5"
          style="
            display: flex;
            width: 100%;
            margin: auto 0px;
            justify-content: flex-end;
            /* 所有子元素向右对齐 */
            padding-top: 5px;
          "
        >
          <div class="iconfont-upload">
            <!-- <el-icon><ZoomIn /></el-icon>
            <el-icon><Promotion /></el-icon> -->
            <!-- <el-popover
              :width="800"
              :offset="20"
              trigger="hover"
              :hide-after="0"
              :popper-style="{ padding: '0px' }"
              title="With title"
              placement="bottom"
            >
              <template #reference>
                <el-icon><Sort /></el-icon>
              </template>
              <template #default> 这里是内容 </template>
            </el-popover> -->
            <!-- <el-icon><Headset /></el-icon>
            <el-icon><PictureFilled /></el-icon> -->
            <el-text>{{ currentDate }}</el-text>
            <el-dropdown @command="handleCommand">
              <div class="user-info">
                <div class="avatar">
                  <!-- 头像 
                  :avatar="userInfo.avatar"
                    :avatarurl="userInfo.avatarurl"
                    v-if="flag"
                  -->
                  <Avatar :width="40" :height="37"> </Avatar>
                </div>
                <span class="nickname" style="font-size: medium">
                  {{ user && user.nickName ? user.nickName : "海内存知己！" }}
                </span>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="updateAvatar"
                    >修改头像</el-dropdown-item
                  >
                  <el-dropdown-item command="updatePassword"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item command="userpage"
                    >个人资料</el-dropdown-item
                  >
                  <el-dropdown-item command="logOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.top {
  height: 50px;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* background: #fff; */
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.08);

  .el-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 100%;

      /* icon */
      img {
        width: 50px;
        height: 50px;
        margin: auto 10px;
      }
      .left-common {
        display: flex;
        align-items: center;
        justify-content: left;
        width: 100%;

        .animated {
          animation-duration: 1s;
          animation-fill-mode: both;
          animation-iteration-count: infinite;
        }

        @keyframes heartBeat {
          0% {
            transform: scale(1);
          }

          14% {
            transform: scale(1.3);
          }

          28% {
            transform: scale(1);
          }

          42% {
            transform: scale(1.3);
          }

          70% {
            transform: scale(1);
          }
        }

        .heartBeat {
          animation-name: heartBeat;
          animation-duration: calc(1s * 1.3);
          animation-timing-function: ease-in-out;
        }

        /* 文字 */
        .title-2 {
          margin: 7px 5px;
          color: #090909;
          text-shadow: 1px -1px rgba(249, 246, 246, 0.4),
            -1px 1px rgba(79, 77, 77, 0.4);
          font-size: 23px;
          letter-spacing: 5px;
        }
        .el-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
          margin: auto 5px;
        }
        .route-show {
          padding-top: 5px;
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
  }

  .iconfont-upload {
    display: flex;
    margin: auto 0px;
    gap: 16px; /* 设置间距 */
    align-items: center; /* 垂直居中对齐 */
  }
  .user-info {
    margin-right: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    outline: none;
    .avatar {
      margin: 0px, 5px, 0px, 10px;
    }
    .nickname {
      color: #06a7ff;
    }
  }
}
</style>
